<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body style="opacity: 1;">

  <body>
    <!-- <script>
      var documentElement = document.documentElement;
      function callback() {
        var clientWidth = documentElement.clientWidth;
        // 屏幕宽度大于780，不在放大
        clientWidth = clientWidth < 780 ? clientWidth : 780;
        documentElement.style.fontSize = clientWidth / 10 + 'px';
      }
      document.addEventListener('DOMContentLoaded', callback);
      window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);
    </script> -->
    <div id="my-lucky"></div>
    <br />
    <button onclick="start()">play()</button>
    <button onclick="myLucky.stop(0)">stop(0)</button>
    <button onclick="myLucky.stop(1)">stop(1)</button>
    <button onclick="myLucky.stop(-1)">stop(-1)</button>
    <button onclick="myLucky.init()">init()</button>
    <br />
    <button onclick="test1()">test1()</button>
    <script src="../dist/index.umd.js"></script>
    <script>
      function test1() {
        myLucky.defaultStyle.background = '#ddd'
      }
      function start() {
        myLucky.prizes.forEach(el=> Object.assign(el,{visible:false}))
        myLucky.play()
      }
      const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', {
        width: '200px',
        height: '200px',
        blocks: [{ padding: '1px', background: '#ccc' }],
        prizes: [
          { fonts: [{ text: '0', top: '0%' }], 
          imgs: [{ src: 'https://oss.cdddian.com/gift/2022-12-29/5ee5af5613124800b3139ae3189d9129471693.png',top:'10%', width: 50, height: 50, bg: './test.png' }],
          visible:false
          },
          { fonts: [{ text: '1', top: '10%' }], visible:false },
          { fonts: [{ text: '2', top: '10%' }] },
          { fonts: [{ text: '3', top: '10%' }] },
          { fonts: [{ text: '4', top: '10%' }] },
          { fonts: [{ text: '5', top: '10%' }] },
        ],
        buttons: [
          { radius: '50%', background: '#fff' },
        ],
        defaultStyle: {
          background: '#fff'
        },
        defaultConfig: {
          gutter: 1,
          activeBackground:{src:"https://app.cdddian.com/img/turntable-active-item.da48f5b5.png",width:107,height:100}
        },
        start() {
          myLucky.play()
          setTimeout(() => {
            myLucky.stop(0)
          })
        },
        end(prize){
          //console.log(prize);
          prize.visible = true;
        }
      })
    </script>
  </body>
</body>

</html>